<template>
  <el-dialog
    :visible="dialogVisible"
    v-if="dialogVisible"
    width="35%"
    :before-close="closeForm"
  >
    <el-form
      :model="form"
      :rules="rules"
      :status-icon="true"
      ref="form"
      label-width="80px"
    >
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item
            v-if="form.orderReceipt.receipt_msg"
            label="地址"
            prop="orderReceipt.receipt_msg.address.kr"
          >
            <el-input
              placeholder="请输入收货地址"
              v-model="form.orderReceipt.receipt_msg.address.kr"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="邮编"
            prop="orderReceipt.receipt_msg.postal_code"
            v-if="form.orderReceipt.receipt_msg"
          >
            <el-input
              placeholder="请输入邮编"
              v-model="form.orderReceipt.receipt_msg.postal_code"
            ></el-input>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="24">-->
        <!--          <el-form-item label="电话号码" prop="receipt_msg.Tel">-->
        <!--            <el-input-->
        <!--              v-if="form.receipt_msg"-->
        <!--              placeholder="请输入电话号码"-->
        <!--              v-model="form.receipt_msg.Tel"-->
        <!--            ></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button size="small" type="primary" @click="handleSubmit"
        ><i class="el-icon-circle-plus-outline"></i> 保存
      </el-button>
      <el-button size="small" @click="closeForm"
        ><i class="el-icon-circle-close"></i> 取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "fillPccModule",
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      rules: {
        "orderReceipt.receipt_msg.address.kr": [
          {
            required: true,
            message: "请输入收货地址",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.receipt_msg.postal_code": [
          {
            required: true,
            message: "请输入邮编",
            trigger: ["blur", "change"],
          },
        ],
        // "receipt_msg.Tel": [
        //   {
        //     required: true,
        //     message: "请输入电话",
        //     trigger: ["blur", "change"],
        //   },
        // ],
      },
    };
  },
  watch: {
    editData: {
      handler(val) {
        this.form = JSON.parse(JSON.stringify(val));
        console.log(this.form);
      },
    },
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submit", {
            id: this.form.storage_order_id,
            address: this.form.orderReceipt.receipt_msg.address.kr,
            status: "PendingItems",
          });
        }
      });
    },
    closeForm() {
      this.$emit("closeForm");
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
